<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple日记转HTML工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入JSZip库用于压缩文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        :root {
            --primary: #c71d23; /* Gitee主题色 */
            --secondary: #a5181d;
            --light: #f8f9fc;
            --dark: #3a3b45;
            --success: #1cc88a;
            --info: #36b9cc;
            --warning: #f6c23e;
            --danger: #e74a3b;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e3e6f0 100%);
            min-height: 100vh;
            padding: 20px;
            color: #2d3748;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin: 30px 0 40px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        header h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            color: #4a5568;
        }
        
        .app-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 25px;
            margin-bottom: 40px;
        }
        
        @media (max-width: 900px) {
            .app-container {
                grid-template-columns: 1fr;
            }
        }
        
        .panel {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        .section-title {
            font-size: 1.5rem;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .upload-box {
            border: 3px dashed var(--primary);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(199, 29, 35, 0.05);
            position: relative;
            overflow: hidden;
        }
        
        .upload-box:hover {
            background: rgba(199, 29, 35, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(199, 29, 35, 0.2);
        }
        
        .upload-box i {
            font-size: 64px;
            color: var(--primary);
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        .upload-box h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .upload-box p {
            color: #718096;
            font-size: 1rem;
            margin-bottom: 5px;
        }
        
        #jsonInput {
            display: none;
        }
        
        .actions {
            display: flex;
            gap: 15px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 14px 28px;
            border-radius: 50px;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(199, 29, 35, 0.3);
        }
        
        .btn-secondary {
            background: var(--info);
            color: white;
        }
        
        .btn-secondary:hover {
            background: #2aa3b9;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background: rgba(199, 29, 35, 0.1);
        }
        
        .btn:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .diary-container {
            display: grid;
            gap: 25px;
            max-height: 75vh;
            overflow-y: auto;
            padding: 10px 5px;
        }
        
        .diary-container::-webkit-scrollbar {
            width: 8px;
        }
        
        .diary-container::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.03);
        }
        
        .diary-container::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 4px;
        }
        
        .entry {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-left: 4px solid var(--primary);
            transition: transform 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .entry:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        }
        
        .entry-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .entry-date {
            color: #718096;
            font-size: 0.95rem;
            background: #f8f9fc;
            padding: 8px 15px;
            border-radius: 50px;
            font-weight: 500;
        }
        
        .entry-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .tag {
            background: rgba(199, 29, 35, 0.15);
            color: var(--primary);
            padding: 7px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .tag-info {
            background: rgba(54, 185, 204, 0.15);
            color: var(--info);
        }
        
        .entry-content {
            white-space: pre-line;
            margin: 20px 0;
            line-height: 1.8;
            color: #2d3748;
            font-size: 1.05rem;
        }
        
        .entry-content a {
            color: var(--primary);
            text-decoration: none;
            border-bottom: 1px dashed;
            transition: all 0.3s;
        }
        
        .entry-content a:hover {
            color: var(--secondary);
            border-bottom: 1px solid;
        }
        
        .media-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #edf2f7;
        }
        
        .section-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            color: var(--dark);
            font-weight: 600;
        }
        
        .album {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }
        
        .album-item {
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }
        
        .album-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        }
        
        .album-item img, .album-item video {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s;
        }
        
        .album-item:hover img, .album-item:hover video {
            transform: scale(1.05);
        }
        
        .media-caption {
            padding: 10px;
            font-size: 0.85rem;
            color: #4a5568;
            text-align: center;
            background: rgba(255,255,255,0.9);
        }
        
        .audio-player {
            width: 100%;
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fc;
            border-radius: 12px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        audio {
            width: 100%;
            height: 54px;
        }
        
        .music-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px;
            background: rgba(199, 29, 35, 0.1);
            border-radius: 12px;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            margin-top: 15px;
            transition: all 0.3s;
        }
        
        .music-link:hover {
            background: rgba(199, 29, 35, 0.2);
            transform: translateX(5px);
        }
        
        .gitee-section {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 35px;
            margin-top: 40px;
        }
        
        .steps {
            display: grid;
            gap: 20px;
            counter-reset: step;
            margin-top: 25px;
        }
        
        .step {
            position: relative;
            padding-left: 65px;
            padding-top: 5px;
        }
        
        .step:before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .step h4 {
            margin-bottom: 10px;
            color: var(--dark);
            font-size: 1.25rem;
        }
        
        .step p {
            color: #718096;
            line-height: 1.7;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 30px;
            color: #718096;
            font-size: 0.95rem;
        }
        
        /* 下载进度条样式 */
        .progress-container {
            margin-top: 20px;
            height: 8px;
            background-color: #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            display: none;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--success);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .download-status {
            margin-top: 10px;
            font-size: 0.9rem;
            color: #4a5568;
            display: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2.2rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 0.95rem;
                width: 100%;
                justify-content: center;
            }
            
            .actions {
                flex-direction: column;
            }
            
            .entry-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .album {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 480px) {
            header h1 {
                font-size: 1.8rem;
            }
            
            .section-title {
                font-size: 1.3rem;
            }
            
            .upload-box h3 {
                font-size: 1.3rem;
            }
            
            .album {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-images"></i> simple动态转HTML工具</h1>
            <p>将JSON格式的日记数据转换为HTML页面，可先下载媒体到本地再进行转化</p>
        </header>
        
        <div class="app-container">
            <div class="panel">
                <h2 class="section-title"><i class="fas fa-file-upload"></i> 上传JSON文件</h2>
                
                <div class="upload-box" id="uploadBox">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>点击或拖放JSON文件</h3>
                    <p>支持包含图片、视频、音频的日记JSON格式</p>
                    <p>上传后将自动生成预览</p>
                    <input type="file" id="jsonInput" accept=".json">
                </div>
                
                <div class="actions">
                    <button class="btn btn-primary" id="exportHtml" disabled>
                        <i class="fas fa-download"></i> 导出HTML文件
                    </button>
                    <button class="btn btn-secondary" id="downloadMedia" disabled>
                        <i class="fas fa-file-archive"></i> 下载媒体并打包ZIP
                    </button>
                    <button class="btn btn-outline" id="resetBtn">
                        <i class="fas fa-redo"></i> 重置页面
                    </button>
                </div>
                
                <!-- 下载进度条 -->
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
                <div class="download-status" id="downloadStatus"></div>
                
                <div style="margin-top: 30px; padding: 15px; background: #f8f9fc; border-radius: 12px;">
                    <h3 style="color: var(--dark); margin-bottom: 15px;">JSON格式要求：</h3>
                    <pre style="background: white; padding: 15px; border-radius: 8px; font-size: 0.85rem;">
{
  "date": "2025-07-26T05:20:00",
  "title": "示例日记",
  "content": "今天去海边游玩...",
  "tags": ["旅行", "海边"],
  "album": [
    {"type": "image", "url": "image1.jpg", "caption": "海边风景"},
    {"type": "video", "url": "video1.mp4"}
  ],
  "audio": "audio1.mp3",
  "music": "https://music.example.com/song123"
}</pre>
                </div>
            </div>
            
            <div class="panel">
                <h2 class="section-title"><i class="fas fa-eye"></i> 预览效果</h2>
                <div class="diary-container" id="diaryContainer">
                    <!-- 示例条目 -->
                    <div class="entry">
                        <div class="entry-header">
                            <div class="entry-date">2025-08-05 10:30:45</div>
                            <div class="entry-tags">
                                <span class="tag">示例</span>
                                <span class="tag tag-info">多媒体</span>
                            </div>
                        </div>
                        <div class="entry-content">
                            上传JSON文件后，这里将显示您的日记内容。
                            支持多种媒体类型显示：
                            - 图片相册
                            - 视频播放器
                            - 音频播放器
                            - 音乐链接
                        </div>
                        
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-camera"></i>
                                <span>图片和视频</span>
                            </div>
                            <div class="album">
                                <div class="album-item">
                                    <img src="https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=600" alt="自然风景">
                                    <div class="media-caption">示例图片</div>
                                </div>
                                <div class="album-item">
                                    <video controls>
                                        <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
                                        您的浏览器不支持视频标签
                                    </video>
                                    <div class="media-caption">示例视频</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-volume-up"></i>
                                <span>音频内容</span>
                            </div>
                            <div class="audio-player">
                                <audio controls>
                                    <source src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mp3">
                                    您的浏览器不支持音频元素
                                </audio>
                            </div>
                        </div>
                        
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-music"></i>
                                <span>音乐链接</span>
                            </div>
                            <a href="https://music.example.com/song123" class="music-link">
                                <i class="fas fa-external-link-alt"></i>
                                <span>点击收听今天的推荐音乐</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2025 simple动态转HTML工具 | 基于Web技术构建 | @喜</p>
        </footer>
    </div>

    <script>
        // DOM元素
        const uploadBox = document.getElementById('uploadBox');
        const jsonInput = document.getElementById('jsonInput');
        const diaryContainer = document.getElementById('diaryContainer');
        const exportHtmlBtn = document.getElementById('exportHtml');
        const resetBtn = document.getElementById('resetBtn');
        const downloadMediaBtn = document.getElementById('downloadMedia');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const downloadStatus = document.getElementById('downloadStatus');
        
        // 存储原始日记数据
        let originalDiaryData = null;
        
        // 点击上传区域触发文件选择
        uploadBox.addEventListener('click', () => {
            jsonInput.click();
        });
        
        // 拖放功能
        uploadBox.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadBox.style.borderColor = '#2ecc71';
            uploadBox.style.backgroundColor = 'rgba(46, 204, 113, 0.1)';
        });
        
        uploadBox.addEventListener('dragleave', () => {
            uploadBox.style.borderColor = '#c71d23';
            uploadBox.style.backgroundColor = 'rgba(199, 29, 35, 0.05)';
        });
        
        uploadBox.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadBox.style.borderColor = '#c71d23';
            uploadBox.style.backgroundColor = 'rgba(199, 29, 35, 0.05)';
            
            if (e.dataTransfer.files.length) {
                handleFile(e.dataTransfer.files[0]);
            }
        });
        
        // 文件选择处理
        jsonInput.addEventListener('change', (e) => {
            if (e.target.files.length) {
                handleFile(e.target.files[0]);
            }
        });
        
        // 重置按钮
        resetBtn.addEventListener('click', () => {
            jsonInput.value = '';
            uploadBox.innerHTML = `
                <i class="fas fa-cloud-upload-alt"></i>
                <h3>点击或拖放JSON文件</h3>
                <p>支持包含图片、视频、音频的日记JSON格式</p>
                <p>上传后将自动生成预览</p>
                <input type="file" id="jsonInput" accept=".json">
            `;
            originalDiaryData = null;
            renderDiary([sampleEntry]);
            exportHtmlBtn.disabled = true;
            downloadMediaBtn.disabled = true;
            progressContainer.style.display = 'none';
            downloadStatus.style.display = 'none';
        });
        
        // 示例条目数据
        const sampleEntry = {
            date: "2025-08-05T10:30:45",
            title: "示例日记",
            content: "这是一个展示各种媒体类型的示例日记，包含图片、视频、音频和音乐链接。\n\n上传您的JSON文件后，这里将显示您的实际日记内容。",
            tags: ["示例", "多媒体"],
            album: [
                {
                    type: "image",
                    url: "https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=600",
                    caption: "自然风景"
                },
                {
                    type: "video",
                    url: "http://vjs.zencdn.net/v/oceans.mp4",
                    caption: "示例视频"
                }
            ],
            audio: "http://music.163.com/song/media/outer/url?id=447925558.mp3",
            music: "https://y.music.163.com/m/song?id=65800&uct2=ZGZ23VvH8fSzM4pMlgbO%2Bg%3D%3D&fx-wechatnew=t1&fx-wxqd=&fx-wordtest=&fx-listentest=t3&H5_DownloadVIPGift=&playerUIModeId=76001&PlayerStyles_SynchronousSharing=t3&dlt=0846&app_version=9.3.40&sc=wm&tn="
        };
        
        // 初始渲染示例
        renderDiary([sampleEntry]);
        
        // 处理上传的JSON文件
        function handleFile(file) {
            if (!file.type.includes('json') && !file.name.endsWith('.json')) {
                alert('请选择JSON格式的文件');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const diaryData = JSON.parse(e.target.result);
                    
                    // 保存原始数据
                    originalDiaryData = diaryData;
                    
                    // 如果单个条目则转为数组
                    const entries = Array.isArray(diaryData) ? diaryData : [diaryData];
                    
                    renderDiary(entries);
                    exportHtmlBtn.disabled = false;
                    downloadMediaBtn.disabled = false;
                    
                    // 更新上传框显示
                    uploadBox.innerHTML = `
                        <i class="fas fa-check-circle" style="color:#2ecc71"></i>
                        <h3>${file.name}</h3>
                        <p>成功加载 ${entries.length} 篇日记</p>
                        <p style="color:var(--primary); font-weight:500;">点击预览区域查看媒体内容</p>
                    `;
                } catch (error) {
                    alert('解析JSON失败: ' + error.message);
                }
            };
            reader.readAsText(file);
        }
        
        // 渲染日记内容
        function renderDiary(entries) {
            diaryContainer.innerHTML = '';
            
            entries.forEach(entry => {
                const entryElement = document.createElement('div');
                entryElement.className = 'entry';
                
                // 日期
                const date = formatDate(entry.date);
                
                // 标签
                let tagsHTML = '';
                if (entry.tags && entry.tags.length) {
                    tagsHTML = `<div class="entry-tags">${
                        entry.tags.map(tag => `<span class="tag">${tag}</span>`).join('')
                    }</div>`;
                }
                
                // 内容
                const contentHTML = entry.content ? `<div class="entry-content">${linkify(entry.content)}</div>` : '';
                
                // 相册媒体
                let albumHTML = '';
                if (entry.album && entry.album.length) {
                    let albumItems = '';
                    
                    entry.album.forEach(media => {
                        if (media.type === 'image') {
                            albumItems += `
                                <div class="album-item">
                                    <img src="${media.url}" alt="${media.caption || '图片'}">
                                    ${media.caption ? `<div class="media-caption">${media.caption}</div>` : ''}
                                </div>
                            `;
                        } else if (media.type === 'video') {
                            albumItems += `
                                <div class="album-item">
                                    <video controls>
                                        <source src="${media.url}" type="video/mp4">
                                        您的浏览器不支持视频标签
                                    </video>
                                    ${media.caption ? `<div class="media-caption">${media.caption}</div>` : ''}
                                </div>
                            `;
                        }
                    });
                    
                    albumHTML = `
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-camera"></i>
                                <span>图片和视频</span>
                            </div>
                            <div class="album">
                                ${albumItems}
                            </div>
                        </div>
                    `;
                }
                
                // 音频
                let audioHTML = '';
                if (entry.audio) {
                    audioHTML = `
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-volume-up"></i>
                                <span>音频内容</span>
                            </div>
                            <div class="audio-player">
                                <audio controls>
                                    <source src="${entry.audio}" type="audio/mp3">
                                    您的浏览器不支持音频元素
                                </audio>
                            </div>
                        </div>
                    `;
                }
                
                // 音乐链接
                let musicHTML = '';
                if (entry.music) {
                    musicHTML = `
                        <div class="media-section">
                            <div class="section-heading">
                                <i class="fas fa-music"></i>
                                <span>音乐链接</span>
                            </div>
                            <a href="${entry.music}" class="music-link" target="_blank">
                                <i class="fas fa-external-link-alt"></i>
                                <span>点击收听音乐</span>
                            </a>
                        </div>
                    `;
                }
                
                entryElement.innerHTML = `
                    <div class="entry-header">
                        <div class="entry-date">${date}</div>
                        ${tagsHTML}
                    </div>
                    ${contentHTML}
                    ${albumHTML}
                    ${audioHTML}
                    ${musicHTML}
                `;
                
                diaryContainer.appendChild(entryElement);
            });
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '未指定日期';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
        
        // 将文本中的URL转换为可点击链接
        function linkify(text) {
            if (!text) return '';
            const urlRegex = /(https?:\/\/[^\s]+)/g;
            return text
                .replace(urlRegex, url => {
                    return `<a href="${url}" target="_blank">${url}</a>`;
                })
                .replace(/\n/g, '<br>');
        }
        
        // 导出HTML文件
        exportHtmlBtn.addEventListener('click', () => {
            const style = document.querySelector('style').innerHTML;
            
            const htmlContent = `
                <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>simple日志导出--喜--1.0</title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
            <style>${style}</style>
        </head>
        <body>

                ${diaryContainer.innerHTML}

        </body>
        </html>
            `;
            
            const blob = new Blob([htmlContent], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = 'my-multimedia-diary.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            alert('导出成功！文件已保存为 my-multimedia-diary.html');
        });
        
        // 下载媒体文件并打包成ZIP
        downloadMediaBtn.addEventListener('click', async () => {
            if (!originalDiaryData) return;
            
            // 显示进度条
            progressContainer.style.display = 'block';
            downloadStatus.style.display = 'block';
            progressBar.style.width = '0%';
            downloadStatus.textContent = '准备下载媒体文件...';
            
            try {
                // 创建ZIP压缩包
                const zip = new JSZip();
                
                // 提取所有媒体URL
                const mediaFiles = extractMediaUrls(originalDiaryData);
                const totalFiles = mediaFiles.length;
                
                if (totalFiles === 0) {
                    alert('没有找到可下载的媒体文件');
                    resetProgress();
                    return;
                }
                
                // 创建本地JSON副本
                const localDiaryData = JSON.parse(JSON.stringify(originalDiaryData));
                
                // 下载所有媒体文件并添加到ZIP
                for (let i = 0; i < totalFiles; i++) {
                    const fileInfo = mediaFiles[i];
                    const progress = Math.round(((i + 1) / totalFiles) * 100);
                    
                    downloadStatus.textContent = `正在下载: ${fileInfo.url.split('/').pop()} (${i + 1}/${totalFiles})`;
                    
                    try {
                        // 下载文件并添加到ZIP
                        const { localPath, blob } = await downloadMediaToZip(fileInfo.url, fileInfo.type);
                        
                        // 添加到ZIP压缩包
                        zip.file(localPath, blob);
                        
                        // 更新本地JSON中的URL
                        updateMediaUrl(localDiaryData, fileInfo.path, localPath, fileInfo.entryIndex);
                        
                        // 更新进度条
                        progressBar.style.width = `${progress}%`;
                    } catch (error) {
                        console.error(`下载失败: ${fileInfo.url}`, error);
                        downloadStatus.textContent = `下载失败: ${fileInfo.url.split('/').pop()}，将跳过此文件`;
                        await new Promise(resolve => setTimeout(resolve, 2000));
                    }
                }
                
                // 添加本地JSON文件到ZIP
                downloadStatus.textContent = '正在准备本地JSON文件...';
                const jsonString = JSON.stringify(localDiaryData, null, 2);
                zip.file('local-diary-data.json', jsonString);
                
                // 生成ZIP文件并下载
                downloadStatus.textContent = '正在生成压缩包...';
                zip.generateAsync({ type: 'blob' }, (metadata) => {
                    const zipProgress = Math.round(metadata.percent);
                    progressBar.style.width = `${zipProgress}%`;
                    downloadStatus.textContent = `正在压缩文件: ${zipProgress}%`;
                }).then((content) => {
                    // 下载ZIP文件
                    const url = URL.createObjectURL(content);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'diary-media-package.zip';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    
                    setTimeout(() => {
                        alert('压缩包生成完成！包含所有媒体文件和本地JSON文件。');
                        resetProgress();
                    }, 1000);
                });
                
            } catch (error) {
                console.error('下载过程出错', error);
                downloadStatus.textContent = `下载出错: ${error.message}`;
                alert(`下载过程出错: ${error.message}`);
            }
        });
        
        // 提取所有媒体URL
        function extractMediaUrls(diaryData) {
            const mediaFiles = [];
            const entries = Array.isArray(diaryData) ? diaryData : [diaryData];
            
            entries.forEach((entry, entryIndex) => {
                // 处理相册中的媒体
                if (entry.album && entry.album.length) {
                    entry.album.forEach((media, mediaIndex) => {
                        if (media.url && isAbsoluteUrl(media.url)) {
                            mediaFiles.push({
                                url: media.url,
                                type: media.type,
                                path: `album[${mediaIndex}].url`,
                                entryIndex
                            });
                        }
                    });
                }
                
                // 处理音频
                if (entry.audio && isAbsoluteUrl(entry.audio)) {
                    mediaFiles.push({
                        url: entry.audio,
                        type: 'audio',
                        path: 'audio',
                        entryIndex
                    });
                }
            });
            
            return mediaFiles;
        }
        
        // 检查是否为绝对URL
        function isAbsoluteUrl(url) {
            try {
                new URL(url);
                return true;
            } catch (e) {
                return false;
            }
        }
        
        // 下载媒体文件并返回本地路径和blob对象
        async function downloadMediaToZip(url, type) {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP错误，状态码: ${response.status}`);
                }
                
                const blob = await response.blob();
                
                // 根据类型创建目录
                let directory = '';
                switch (type) {
                    case 'image':
                        directory = 'images/';
                        break;
                    case 'video':
                        directory = 'videos/';
                        break;
                    case 'audio':
                        directory = 'audios/';
                        break;
                    default:
                        directory = 'media/';
                }
                
                // 提取文件名
                const urlParts = url.split('/');
                let fileName = urlParts[urlParts.length - 1];
                
                // 处理URL参数
                if (fileName.includes('?')) {
                    fileName = fileName.split('?')[0];
                }
                
                // 处理没有扩展名的情况
                if (!fileName.includes('.')) {
                    const extension = blob.type.split('/')[1] || 'bin';
                    fileName = `${Date.now()}.${extension}`;
                }
                
                // 创建本地路径
                const localPath = directory + fileName;
                
                return { localPath, blob };
            } catch (error) {
                console.error('下载媒体文件失败', error);
                throw error;
            }
        }
        
        // 更新媒体URL
        function updateMediaUrl(diaryData, path, localUrl, entryIndex) {
            const entries = Array.isArray(diaryData) ? diaryData : [diaryData];
            const parts = path.split('.');
            
            entries.forEach((entry, index) => {
                // 只更新对应的条目
                if (index === entryIndex) {
                    let current = entry;
                    
                    for (let i = 0; i < parts.length; i++) {
                        const part = parts[i];
                        
                        // 处理数组语法，如 album[0]
                        if (part.includes('[')) {
                            const arrayName = part.split('[')[0];
                            const arrayIndex = parseInt(part.split('[')[1].replace(']', ''));
                            
                            if (i === parts.length - 1) {
                                current[arrayName][arrayIndex] = localUrl;
                            } else {
                                current = current[arrayName][arrayIndex];
                            }
                        } else {
                            if (i === parts.length - 1) {
                                current[part] = localUrl;
                            } else {
                                current = current[part];
                            }
                        }
                    }
                }
            });
        }
        
        // 重置进度条
        function resetProgress() {
            progressContainer.style.display = 'none';
            downloadStatus.style.display = 'none';
            progressBar.style.width = '0%';
        }
    </script>
</body>
</html>